<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情页面</title>
    <style>
        .title {
            text-align: center;
            color: #3e3e3e;
        }

        .order {
            border-collapse: collapse;
            height: 2.1333rem;
            margin: 0 auto;
            text-align: center;
            border-radius: 10px 10px 0 0;
            overflow: hidden;
        }

        .order tr:nth-child(1) {
            background-image: linear-gradient(to right, #0027e8, #00fe44);
        }

        .order tr:nth-child(2) {
            background-image: linear-gradient(to right, #fdf0eb, #fdeff6);
        }

        .order tr:nth-child(2) :last-child {
            color: #eb0202;
        }

        .order th {
            padding: 5px 50px;
            color: #fff;
        }

        .order,
        th,
        td {
            border: 1px solid #fff;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <h2 class="title">订单详情页面</h2>


    <script>
        let price = prompt('请输入商品单价：')
        let num = prompt('请输入商品数量：')
        let address = prompt('请输入收货地址：')

        let total = price * num

        document.write(`
            <table class="order">
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>总价</th>
                    <th>收货地址</th>
                </tr>
                <tr>
                    <td>小米青春版PLUS</td>
                    <td>${price}</td>
                    <td>${num}</td>
                    <td>${total}</td>
                    <td>${address}</td>
                </tr>
            </table>
                
                    
        `)
    </script>
</body>

</html>